<template>
  <div class="movieCotainer">
      <van-nav-bar
        title="猫眼电影"
        class="navBar"/>
      <div class="banner">
          <van-swipe :autoplay="3000" width="200px" class="my-swiper">
            <van-swipe-item v-for="image in bannerList" :key="image.bannerId">
                <img v-lazy="image.imgUrl" />
            </van-swipe-item>
            </van-swipe>
      </div>
        <div class="topbar">
          <router-link to="/movie/hot" tag="div" activeClass="myactive" exact>正在热映</router-link>
          <router-link to="/movie/coming" tag="div" activeClass="myactive">即将上映</router-link>
        </div>
        <keep-alive :include="incluePages">
          <router-view></router-view>
      </keep-alive>
  </div>
</template>

<script>
import axios from 'axios';
  export default {
    name:'Movie',
    data() {
        return {
            bannerList:[],
            isFixed:false,
            incluePages: ['Hot', 'Coming'],
        }
    },
    created() {
    axios({
      url: 'https://m.maizuo.com/gateway?type=2&cityId=310100&k=721294',
      headers: {
        'X-Client-Info':
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1586523505863288426720","bc":"310100"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      this.bannerList = res.data.data
    })
  },
  mounted(){
    this.$store.dispatch('movie/getHotMovieList')
    
  },
  }
</script>
<style lang="less" scoped>
  .my-swiper .van-swipe-item {
    width:100%;
    height:200px;
    img{
      width: 100%;
    }
  }
  .topbar {
  display: flex;
  position: relative;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 44px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  color: #666;
  font-weight: 700;
  background-color: #fff;
  div {
    height: 100%;
    line-height: 44px;
    padding: 0 10px;
  }
}
.fixed {
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 999;
}
.myactive {
  color: red;
  border-bottom: 2px solid #ef4238;
}


</style>
